<template>
  <div id="form-container">
    <el-steps :active="active" align-center finish-status="success">
      <el-step title="填写资料"></el-step>
      <el-step title="上传材料"></el-step>
      <el-step title="提交审核"></el-step>
    </el-steps>
    <transition name="slide-fade">
    <el-form v-if="active==1" style="width: 100%;height: 80%" inline :model="registerMsg" ref="ruleForm" label-width="100px">

      <el-form-item
              prop="universityName"
              status-icon
              label="学校名称"
              :rules="[
       {required: true,message:'请输入学校名称',trigger:['blur','change']}

              ]"
      >
        <el-input style="width: 55vw" size="small" v-model="registerMsg.universityName" placeholder="请输入学校名称"></el-input>
      </el-form-item>
      <br>

      <el-form-item
              status-icon
              prop="email"
              label="学校邮箱"
              :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
      >
        <el-input style="width: 55vw" size="small" placeholder="请输入邮箱" v-model="registerMsg.email"></el-input>
      </el-form-item>
      <br>

      <el-form-item
              prop="legalPerson"
              status-icon
              label="法人代表"
              :rules="[
       {required: true,message:'请输入法人代表',trigger:['blur','change']}

              ]"
      >
        <el-input size="small" v-model="registerMsg.legalPerson" placeholder="请输入法人代表"></el-input>
      </el-form-item>

      <el-form-item
              prop="address"
              status-icon
              label="学校地址"
              :rules="[
       {required: true,message:'请选择地址',trigger:['blur','change']}

              ]"
      >
        <el-cascader
            style="width: 120px"
            size="small"
            :options="options"
            v-model="registerMsg.address"
            @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item
          prop="detailAddress"
          status-icon
          :rules="[
       {required: false,message:'请输入详细地址',trigger:['blur','change']}

              ]"
      >
        <el-input style="width: 20vw" size="small" v-model="detailAddress" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <br>


      <el-form-item
              prop="nature"
              status-icon
              label="办学性质"
              :rules="[
       {required: true,message:'请选择',trigger:['blur','change']}

              ]"
      >
        <el-select size="mini" v-model="registerMsg.nature" placeholder="请选择">
          <el-option
                  v-for="item in natureOptions"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
          </el-option>
        </el-select>



      </el-form-item>

      <el-form-item
              prop="level"
              status-icon
              label="办学层次"
              :rules="[
       {required: true,message:'请选择',trigger:['blur','change']}

              ]"
      >
        <el-select  size="mini" v-model="registerMsg.level" placeholder="请选择">
          <el-option
              v-for="item in levels"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item
          status-icon
          prop="legalRegTime"
          label="注册日期"
          :rules="[
      { required: true, message: '请选择日期', trigger: 'blur' }
    ]"
      >
        <el-date-picker style="width: 35vw"  size="small" type="date" placeholder="选择日期" :picker-options="pickerOptions" v-model="registerMsg.legalRegTime" > </el-date-picker>
      </el-form-item>
      <br>

        <div style="display: flex;justify-content:space-between;width:100%;height: 15%;">
          <div style="margin-left: 20px">
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="$router.push('/main/login')" type="danger">取消</el-button>
          </div>
          <el-button style="height: 80%" type="primary" @click="active++">下一步</el-button>
        </div>


    </el-form>

      <div v-if="active==2" id="material">
        <div style="display: flex;justify-content:flex-end;width: 66%">
                <el-upload class="upload-demo"
                           drag
                           :data="upMsg"
                           ref="upload"
                           :action="baseUrl+'/file/upload'"
                           multiple
                           name="multipartFiles"
                           :auto-upload="true"
                           :on-error="uploadError"
                           :on-success="uploadSuccess"
                >
                  <i  class="el-icon-upload"></i>
                  <div  class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                  <div  class="el-upload__tip" slot="tip">上传图片证明材料</div>
                </el-upload>
        </div>

        <div style="width: 30%;height: 100%;display: flex;justify-content:flex-end;align-items:flex-end;">
          <el-button type="success" @click="upCancel">取消</el-button>
          <el-button @click="active--" type="danger">回退</el-button>
          <el-button @click="submit" style="float: right" type="primary">提交</el-button>
        </div>

      </div>


      <div v-if="active==3" id="success">
        <h2 style="color: orange">提交成功!</h2><br>
        <p style="font-size: 14px;color: olive">审核结果将会通过邮件发送给您</p>
      </div>
    </transition>
  </div>
</template>

<script>
  import {universityRegister,upCancel} from "../../../network/main";
  import {Message} from 'element-ui'
  import {regionData,CodeToText} from 'element-china-area-data'
  import {baseUrl} from "../../../network/baseUrl";

  export default {
    name: "regCompany",
    created() {
      this.upMsg.ip=returnCitySN["cip"]
    },
    data() {
      return {
        baseUrl:baseUrl(),
        detailAddress:'',
        options:regionData,
        selectedOptions:[],
        active:1,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        natureOptions:[{
          value:'公办'
        },
          {
            value:'民办'
          }],
        levels:['全日制本科','全日制专科'],
        id:'',
        registerMsg:{

          level:'',             //办学层次
          nature:'',            //办学性质
          universityName: '',      //大学名称
          legalPerson: '',      //法人
          legalRegTime: '',     //注册时间
          email:'' ,      //企业邮箱,
          address:''
        },
        upMsg:{
          ip:'',
          type:'university'
        }
      };
    },
    methods: {
      //将地址代码数组转换为地址字符串
      getPlace(arr){
        let str=''
        for(let item of arr){
          str+=CodeToText[item]
        }
        return str
      },
      handleChange (value) {
        console.log(value)
      },
      upCancel(){
        upCancel(returnCitySN["cip"])
        .then(res=>{
          console.log(res)
          this.$router.push("/main/login")
        }).catch(err=>{
          console.log(res)
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      uploadSuccess:function(response, file, fileList) {
        this.id=response.extend.fileId
        Message.success("上传成功!")
        console.log(response);

      },
      uploadError:function (response, file, fileList) {
        console.log("上传文件失败response" +response);
        console.log("上传文件失败file" +file);
        console.log("上传文件失败fileList" +fileList);
        Message.success("上传失败!")
      },
      submit(){
        this.registerMsg.address=this.getPlace(this.registerMsg.address)+this.detailAddress
        console.log(this.registerMsg)
        universityRegister(this.registerMsg,this.id)
        .then(res=>{
          console.log(res)
          if (res.data.code==100){
            Message.success("提交审核成功!")
            this.active++
            setTimeout(()=>{
              this.$router.push("/main/login")
            },2000)

          }else{
            Message.warning(res.data.extend.msg)
          }

        })
      }
    }
  };
</script>

<style scoped>

#form-container{
  overflow: hidden;
  width: 100%;
  height: 80%;
  box-shadow: 0 2px 4px gray;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px;
}
p {
  line-height: 30px;
}
#submit{
  position: fixed;
  left: 21%;
  bottom: 15%;
  width: 80px;
}
#success{
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#material{
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: gainsboro 1px dotted;
}
.slide-fade-enter-active {
  transition: all .2s ease;
  transition-delay: .2s;
}

.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
{
  transform: translateX(20px);
  opacity: 0;
}
</style>